<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Git仓库配置管理</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-family: Arial, sans-serif; background: #f7f7f7; margin: 0; padding: 0; }
    .container { max-width: 900px; margin: 40px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.10); padding: 32px 36px 28px 36px; }
    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .title { font-size: 32px; color: #2319dc; font-weight: bold; }
    .search-add-bar { display: flex; gap: 12px; }
    .search-input { width: 220px; height: 32px; border: 1px solid #c4c7ce; border-radius: 6px; padding: 0 12px; font-size: 16px; }
    .add-btn { height: 34px; background: #4e6ef2; color: #fff; border: none; border-radius: 6px; padding: 0 22px; font-size: 16px; cursor: pointer; }
    .add-btn:hover { background: #4664d2; }
    table { width: 100%; border-collapse: collapse; margin-top: 18px; }
    th, td { border-bottom: 1px solid #eee; padding: 12px 8px; text-align: left; }
    th { background: #f5f7fa; font-weight: bold; }
    tr:last-child td { border-bottom: none; }
    .action-btn { background: none; border: none; color: #4e6ef2; cursor: pointer; font-size: 15px; margin-right: 8px; }
    .action-btn:last-child { margin-right: 0; }
    .action-btn:hover { text-decoration: underline; }
    .edit-row input { width: 90%; padding: 2px 6px; font-size: 15px; }
    .modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.25); z-index: 9999; justify-content: center; align-items: center; }
    .modal { background: #fff; padding: 28px 36px; border-radius: 10px; min-width: 340px; max-width: 90vw; box-shadow: 0 2px 16px rgba(0,0,0,0.18); position: relative; }
    .modal h3 { margin-top: 0; }
    .modal input { width: 100%; margin-bottom: 12px; padding: 6px 10px; font-size: 16px; border: 1px solid #c4c7ce; border-radius: 5px; }
    .modal .modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
    .modal .modal-btn { padding: 6px 18px; font-size: 16px; border: none; border-radius: 5px; cursor: pointer; }
    .modal .modal-btn.primary { background: #4e6ef2; color: #fff; }
    .modal .modal-btn.secondary { background: #eee; color: #333; }
    .modal .modal-btn.primary:hover { background: #4664d2; }
    .modal .modal-btn.secondary:hover { background: #e0e0e0; }
    @media (max-width: 600px) { .container { padding: 10px 2vw; } .header { flex-direction: column; gap: 12px; } }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="window.location.href='javascript:history.go(-1)'" style="position:absolute;left:24px;top:24px;background:#f5f7fa;border:none;border-radius:6px;padding:6px 18px;font-size:16px;cursor:pointer;color:#2319dc;box-shadow:0 1px 4px rgba(0,0,0,0.06);">返回首页</button>
    <script>
      const STORAGE_KEY = 'gitReposConfig';
      
      function loadRepos() {
        const repos = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
        renderRepos(repos);
        return repos;
      }
      
      function saveRepos(repos) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(repos));
      }
      
      function addRepo(repo) {
        const repos = loadRepos();
        repos.push(repo);
        saveRepos(repos);
      }
      
      function deleteRepo(index) {
        const repos = loadRepos();
        repos.splice(index, 1);
        saveRepos(repos);
      }
      
      function updateRepo(index, repo) {
        const repos = loadRepos();
        repos[index] = repo;
        saveRepos(repos);
      }
      
      function searchRepos(keyword) {
        const repos = loadRepos();
        return repos.filter(repo => 
          repo.remoteUrl.includes(keyword) || 
          repo.branch.includes(keyword) ||
          repo.username.includes(keyword)
        );
      }
      
      function renderRepos(repos) {
        const tbody = document.getElementById('repo-list');
        const emptyTip = document.getElementById('empty-tip');
        
        tbody.innerHTML = '';
        
        if (repos.length === 0) {
          emptyTip.style.display = 'block';
          return;
        }
        
        emptyTip.style.display = 'none';
        
        repos.forEach((repo, index) => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${repo.remoteUrl}</td>
            <td>${repo.branch}</td>
            <td>${repo.username}</td>
            <td>${'*'.repeat(repo.password.length)}</td>
            <td>
              <button class="action-btn" onclick="editRepo(${index})">编辑</button>
              <button class="action-btn" onclick="deleteRepo(${index})">删除</button>
            </td>
          `;
          tbody.appendChild(tr);
        });
      }
      
      function initModal() {
        const modalBg = document.getElementById('repo-modal-bg');
        const modalTitle = document.getElementById('modal-title');
        const modalUrl = document.getElementById('modal-url');
        const modalBranch = document.getElementById('modal-branch');
        const modalUser = document.getElementById('modal-user');
        const modalPwd = document.getElementById('modal-pwd');
        const modalCancel = document.getElementById('modal-cancel');
        const modalOk = document.getElementById('modal-ok');
        
        let currentIndex = -1;
        let isEditMode = false;
        
        function clearModal() {
          modalUrl.value = '';
          modalBranch.value = 'master';
          modalUser.value = '';
          modalPwd.value = '';
          currentIndex = -1;
          isEditMode = false;
        }
        
        function showModal() {
          modalBg.style.display = 'flex';
        }
        
        function hideModal() {
          modalBg.style.display = 'none';
          clearModal();
        }
        
        modalCancel.addEventListener('click', hideModal);
        
        modalOk.addEventListener('click', () => {
          const repo = {
            remoteUrl: modalUrl.value,
            branch: modalBranch.value,
            username: modalUser.value,
            password: modalPwd.value
          };
          
          if (isEditMode) {
            updateRepo(currentIndex, repo);
          } else {
            addRepo(repo);
          }
          
          loadRepos();
          hideModal();
        });
        
        window.editRepo = (index) => {
          const repos = loadRepos();
          const repo = repos[index];
          
          modalTitle.textContent = '编辑仓库';
          modalUrl.value = repo.remoteUrl;
          modalBranch.value = repo.branch;
          modalUser.value = repo.username;
          modalPwd.value = repo.password;
          
          currentIndex = index;
          isEditMode = true;
          showModal();
        };
        
        document.getElementById('addRepoBtn').addEventListener('click', () => {
          modalTitle.textContent = '新增仓库';
          showModal();
        });
        
        document.getElementById('searchInput').addEventListener('input', (e) => {
          const keyword = e.target.value;
          const filteredRepos = searchRepos(keyword);
          renderRepos(filteredRepos);
        });
      }
      
      document.addEventListener('DOMContentLoaded', () => {
        initModal();
        loadRepos();
      });
    </script>
    <div class="header">
      <div class="title">仓库配置</div>
      <div class="search-add-bar">
        <input type="text" id="searchInput" class="search-input" placeholder="搜索仓库地址/分支/用户名...">
        <button class="add-btn" id="addRepoBtn">新增仓库</button>
      </div>
    </div>
    <table>
      <thead>
        <tr><th>仓库地址</th><th>分支</th><th>用户名</th><th>密码</th><th>操作</th></tr>
      </thead>
      <tbody id="repo-list"></tbody>
    </table>
    <div id="empty-tip" style="color:#888;margin-top:18px;display:none;">暂无仓库配置。</div>
  </div>
  <div class="modal-bg" id="repo-modal-bg">
    <div class="modal">
      <h3 id="modal-title">新增仓库</h3>
      <input type="text" id="modal-url" placeholder="remoteUrl" required>
      <input type="text" id="modal-branch" placeholder="branch">
      <input type="text" id="modal-user" placeholder="username">
      <input type="password" id="modal-pwd" placeholder="password">
      <div class="modal-actions">
        <button class="modal-btn secondary" id="modal-cancel">取消</button>
        <button class="modal-btn primary" id="modal-ok">确定</button>
      </div>
    </div>
  </div>
</body>
</html>